<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width; user-scalable=0; initial-scale=1.0" />
		<title></title>
		<script type="text/javascript" src="../vue.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.tabbarWrap{
				width: 100%;
				height: 64px;
				border-top: 1px solid #999;
				position: fixed;
				left: 0;
				bottom: 0;
			}
			.itemWrap {
				width: 20%;
				float: left;
				text-align: center;
			}
			.itemWrap img{
				width: 45px;
			}
			.itemWrap span{
				font-size: 14px;
				color: #333;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<tabbar></tabbar>
		</div>
		<template id="parent">
			<div class="tabbarWrap">
				<item src="../../ch07/sj/01%20上机练习素材/练习1：导航切换/img/bg.png" txt="首页"></item>
				<item src="../../ch07/sj/01%20上机练习素材/练习1：导航切换/img/bg.png" txt="搜索"></item>
				<item src="../../ch07/sj/01%20上机练习素材/练习1：导航切换/img/bg.png" txt="热点"></item>
				<item src="../../ch07/sj/01%20上机练习素材/练习1：导航切换/img/bg.png" txt="购物车"></item>
				<item src="../../ch07/sj/01%20上机练习素材/练习1：导航切换/img/bg.png" txt="我的"></item>
			</div>
		</template>
		<template id="son">
			<img :src="src" />
			<br/>
			<span>{{txt}}</span>
		</template>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					
				},
				components:{
					"tabbar":{
						template:"#parent",
						components:{
							"item":{
								template:"#son",
								props:["txt","src"]
							}
						}
					}
				}
			});
		</script>
	</body>
</html>
